<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员成长中心 - 星途社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #5B6EF7;
            --primary-light: #E6E9FF;
            --secondary: #FF7D54;
            --success: #36D399;
            --warning: #FFAB00;
            --dark: #1E293B;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #CBD5E1;
            --radius: 12px;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F8FAFC;
            line-height: 1.6;
            padding-top: 2rem;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1140px;
        }
        
        .page-header {
            margin-bottom: 2.5rem;
            text-align: center;
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 10%;
            width: 80%;
            height: 4px;
            background-color: var(--primary-light);
            border-radius: 2px;
        }
        
        .page-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .profile-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: none;
            overflow: hidden;
            margin-bottom: 2.5rem;
        }
        
        .profile-header {
            background: linear-gradient(135deg, var(--primary) 0%, #7C8AFC 100%);
            color: white;
            padding: 2rem;
            text-align: center;
            position: relative;
        }
        
        .avatar-container {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            margin: 0 auto 1rem;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .user-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-name {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .user-level {
            display: inline-block;
            padding: 0.3rem 1rem;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }
        
        .experience-progress {
            background-color: rgba(255, 255, 255, 0.2);
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 0.75rem;
        }
        
        .progress-fill {
            height: 100%;
            background-color: white;
            border-radius: 5px;
            transition: width 0.8s ease;
        }
        
        .progress-text {
            font-size: 0.9rem;
            opacity: 0.9;
            display: flex;
            justify-content: space-between;
        }
        
        .profile-stats {
            display: flex;
            justify-content: space-around;
            padding: 1.5rem;
            background-color: white;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.25rem;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .tabs-container {
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }
        
        .tab-item {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: var(--gray);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .tab-item.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .tab-item:hover:not(.active) {
            color: var(--dark);
            border-bottom-color: var(--border);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 等级特权样式 */
        .levels-container {
            margin-bottom: 2rem;
        }
        
        .level-card {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .level-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        .level-card.current {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(91, 110, 247, 0.1);
        }
        
        .level-header {
            display: flex;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .level-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-right: 1rem;
        }
        
        .level-1 .level-icon {
            background-color: #F8FAFC;
            color: #94A3B8;
        }
        
        .level-2 .level-icon {
            background-color: #FFF7ED;
            color: #D97706;
        }
        
        .level-3 .level-icon {
            background-color: #F0FDFA;
            color: #059669;
        }
        
        .level-4 .level-icon {
            background-color: #EFF6FF;
            color: #2563EB;
        }
        
        .level-5 .level-icon {
            background-color: #F3E8FF;
            color: #7C3AED;
        }
        
        .level-6 .level-icon {
            background-color: #FEF2F2;
            color: #DC2626;
        }
        
        .level-info {
            flex: 1;
        }
        
        .level-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .current-badge {
            display: inline-block;
            padding: 0.15rem 0.6rem;
            background-color: var(--primary);
            color: white;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .level-requirements {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .level-privileges {
            padding: 1.25rem 1.5rem;
        }
        
        .privilege-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .privilege-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.85rem;
            background-color: var(--light-gray);
            border-radius: 6px;
            font-size: 0.9rem;
        }
        
        .level-card.current .privilege-item {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .privilege-icon {
            font-size: 0.85rem;
        }
        
        /* 成长历程样式 */
        .timeline-container {
            position: relative;
            margin: 2rem 0;
            padding-left: 2rem;
        }
        
        .timeline-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--primary-light);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -2.5rem;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: white;
            border: 3px solid var(--primary);
        }
        
        .timeline-date {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .timeline-content {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            padding: 1.25rem;
            box-shadow: var(--shadow);
        }
        
        .timeline-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .timeline-description {
            color: var(--gray);
            font-size: 0.95rem;
            margin-bottom: 0;
        }
        
        .timeline-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px dashed var(--border);
            font-size: 0.9rem;
        }
        
        .experience-gained {
            color: var(--success);
            font-weight: 500;
        }
        
        /* 经验任务样式 */
        .task-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .task-card {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        .task-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .task-icon {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        .task-daily .task-icon {
            background-color: rgba(91, 110, 247, 0.1);
            color: var(--primary);
        }
        
        .task-weekly .task-icon {
            background-color: rgba(54, 211, 153, 0.1);
            color: var(--success);
        }
        
        .task-achievement .task-icon {
            background-color: rgba(255, 171, 0, 0.1);
            color: var(--warning);
        }
        
        .task-title {
            font-weight: 600;
            margin: 0;
        }
        
        .task-body {
            padding: 1.25rem;
        }
        
        .task-description {
            color: var(--gray);
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }
        
        .task-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .task-experience {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--success);
            font-weight: 500;
        }
        
        .task-difficulty {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.9rem;
        }
        
        .task-progress {
            height: 6px;
            background-color: var(--light-gray);
            border-radius: 3px;
            margin-bottom: 0.5rem;
            overflow: hidden;
        }
        
        .task-progress-fill {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
            transition: width 0.5s ease;
        }
        
        .task-progress-text {
            font-size: 0.85rem;
            color: var(--gray);
            text-align: right;
        }
        
        .task-actions {
            margin-top: 1rem;
        }
        
        .task-btn {
            width: 100%;
            padding: 0.6rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #4A60E0;
        }
        
        .btn-success {
            background-color: var(--success);
            color: white;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-light);
        }
        
        /* 排行榜样式 */
        .ranking-list {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
        }
        
        .ranking-header {
            padding: 1rem 1.5rem;
            background-color: var(--primary-light);
            color: var(--primary);
            font-weight: 600;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
        }
        
        .ranking-column {
            flex: 1;
            text-align: center;
        }
        
        .ranking-column:first-child {
            text-align: left;
        }
        
        .ranking-item {
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.2s ease;
        }
        
        .ranking-item:hover {
            background-color: var(--light-gray);
        }
        
        .ranking-item.self {
            background-color: rgba(91, 110, 247, 0.05);
            border-left: 4px solid var(--primary);
        }
        
        .rank-position {
            flex: 1;
            font-weight: 600;
        }
        
        .rank-1 .rank-position {
            color: #E6B800;
        }
        
        .rank-2 .rank-position {
            color: #A9A9A9;
        }
        
        .rank-3 .rank-position {
            color: #CD7F32;
        }
        
        .rank-user {
            flex: 3;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .rank-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .rank-info {
            text-align: left;
        }
        
        .rank-name {
            font-weight: 500;
            margin-bottom: 0.1rem;
        }
        
        .rank-level {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .rank-score {
            flex: 2;
            text-align: center;
            font-weight: 600;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .task-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .profile-stats {
                flex-wrap: wrap;
            }
            
            .stat-item {
                flex: 1 1 45%;
                margin-bottom: 1rem;
            }
            
            .stat-item:last-child, .stat-item:nth-last-child(2) {
                margin-bottom: 0;
            }
            
            .privilege-list {
                gap: 0.5rem;
            }
            
            .privilege-item {
                font-size: 0.85rem;
                padding: 0.3rem 0.7rem;
            }
            
            .ranking-header, .ranking-item {
                padding: 0.75rem 1rem;
            }
            
            .rank-avatar {
                width: 35px;
                height: 35px;
            }
        }
        
        @media (max-width: 576px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .avatar-container {
                width: 100px;
                height: 100px;
            }
            
            .profile-stats {
                flex-direction: column;
                gap: 1rem;
            }
            
            .stat-item {
                flex: 1 1 100%;
                margin-bottom: 0;
                padding-bottom: 1rem;
                border-bottom: 1px solid var(--border);
            }
            
            .stat-item:last-child {
                padding-bottom: 0;
                border-bottom: none;
            }
            
            .tab-item {
                padding: 0.75rem 0.8rem;
                font-size: 0.9rem;
            }
            
            .level-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .level-icon {
                margin-bottom: 0.75rem;
            }
            
            .task-grid {
                grid-template-columns: 1fr;
            }
            
            .ranking-column:nth-child(2) {
                display: none;
            }
            
            .timeline-item::before {
                left: -2rem;
            }
            
            .timeline-container {
                padding-left: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">会员成长中心</h1>
            <p class="page-subtitle">追踪你的成长历程，解锁更多专属特权，成为社区中的闪耀之星</p>
        </div>
        
        <!-- 用户资料卡片 -->
        <div class="card profile-card">
            <div class="profile-header">
                <div class="avatar-container">
                    <img src="https://picsum.photos/seed/user123/200/200" alt="用户头像" class="user-avatar">
                </div>
                <h2 class="user-name">星辰大海</h2>
                <div class="user-level">Lv.4 探索者</div>
                
                <div class="experience-progress">
                    <div class="progress-fill" style="width: 68%;"></div>
                </div>
                <div class="progress-text">
                    <span>当前经验: 3420/5000</span>
                    <span>距离下一级: 1580</span>
                </div>
            </div>
            
            <div class="profile-stats">
                <div class="stat-item">
                    <div class="stat-value">128</div>
                    <div class="stat-label">已完成任务</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">24</div>
                    <div class="stat-label">获得成就</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">96%</div>
                    <div class="stat-label">活跃度</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">38</div>
                    <div class="stat-label">社区排名</div>
                </div>
            </div>
        </div>
        
        <!-- 内容标签页 -->
        <div class="tabs-container">
            <div class="tab-item active" data-tab="levels">等级特权</div>
            <div class="tab-item" data-tab="timeline">成长历程</div>
            <div class="tab-item" data-tab="tasks">经验任务</div>
            <div class="tab-item" data-tab="ranking">成长排行</div>
        </div>
        
        <!-- 等级特权内容 -->
        <div class="tab-content active" id="levels-content">
            <p class="text-muted mb-4">提升等级可解锁更多特权，每个等级都有独特的标识和专属福利</p>
            
            <div class="levels-container">
                <div class="level-card level-1">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">Lv.1 萌芽者</div>
                            <div class="level-requirements">所需经验: 0 - 999</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 基础社区功能
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 发表内容权限
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 参与话题讨论
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="level-card level-2">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">Lv.2 成长者</div>
                            <div class="level-requirements">所需经验: 1000 - 1999</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 包含Lv.1全部特权
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 自定义个人资料
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 上传自定义头像
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 每日经验上限提升
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="level-card level-3">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-tree"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">Lv.3 探索者</div>
                            <div class="level-requirements">所需经验: 2000 - 4999</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 包含Lv.2全部特权
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 发布长文权限
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 减少广告展示
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 专属话题标签
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 参与内测资格
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="level-card level-4 current">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-mountain"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">
                                Lv.4 攀登者
                                <span class="current-badge">当前等级</span>
                            </div>
                            <div class="level-requirements">所需经验: 5000 - 9999 (已获得3420/5000)</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 包含Lv.3全部特权
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 无广告体验
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 内容优先审核
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 专属客服支持
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 社区活动优先参与
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 自定义主题皮肤
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="level-card level-5">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">Lv.5 星光者</div>
                            <div class="level-requirements">所需经验: 10000 - 29999</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 包含Lv.4全部特权
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 专属身份标识
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 内容优先推荐
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 创建专属话题
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 每月专属礼包
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 社区荣誉勋章
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="level-card level-6">
                    <div class="level-header">
                        <div class="level-icon">
                            <i class="fas fa-crown"></i>
                        </div>
                        <div class="level-info">
                            <div class="level-title">Lv.6 守护者</div>
                            <div class="level-requirements">所需经验: 30000+</div>
                        </div>
                    </div>
                    <div class="level-privileges">
                        <ul class="privilege-list">
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 包含Lv.5全部特权
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 社区管理权限
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 专属线下活动邀请
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 定制化社区服务
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 年度社区盛典门票
                            </li>
                            <li class="privilege-item">
                                <i class="fas fa-check privilege-icon"></i> 官方合作机会
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 成长历程内容 -->
        <div class="tab-content" id="timeline-content">
            <p class="text-muted mb-4">记录你的每一步成长，见证从新手到大神的蜕变历程</p>
            
            <div class="timeline-container">
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 今天 09:24
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-comment text-primary"></i> 发表优质评论
                        </div>
                        <p class="timeline-description">在话题"如何提高社区活跃度"中发表的评论获得了大量点赞，被评为优质评论</p>
                        <div class="timeline-meta">
                            <span>社区互动</span>
                            <span class="experience-gained">+35 经验值</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 昨天 15:47
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-pen text-primary"></i> 发布热门内容
                        </div>
                        <p class="timeline-description">发布的文章"我的社区成长故事"获得了超过100次互动，成为当日热门内容</p>
                        <div class="timeline-meta">
                            <span>内容创作</span>
                            <span class="experience-gained">+120 经验值</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 2023-10-18 10:30
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-trophy text-warning"></i> 获得成就
                        </div>
                        <p class="timeline-description">完成"评论达人"成就，累计发表500条优质评论，获得专属勋章</p>
                        <div class="timeline-meta">
                            <span>成就系统</span>
                            <span class="experience-gained">+500 经验值</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 2023-10-15 08:15
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-calendar-check text-success"></i> 连续签到
                        </div>
                        <p class="timeline-description">完成连续30天签到，获得"坚持不懈"称号和额外奖励</p>
                        <div class="timeline-meta">
                            <span>日常任务</span>
                            <span class="experience-gained">+150 经验值</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 2023-10-10 19:22
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-level-up-alt text-secondary"></i> 等级提升
                        </div>
                        <p class="timeline-description">恭喜！你的经验值达到5000，等级提升至Lv.4 攀登者，解锁更多特权</p>
                        <div class="timeline-meta">
                            <span>等级系统</span>
                            <span class="experience-gained">等级提升奖励</span>
                        </div>
                    </div>
                </div>
                
                <div class="timeline-item">
                    <div class="timeline-date">
                        <i class="fas fa-clock"></i> 2023-09-28 14:55
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-title">
                            <i class="fas fa-users text-primary"></i> 社区活动
                        </div>
                        <p class="timeline-description">参与"社区内容创作大赛"并获得二等奖，作品获得官方推荐</p>
                        <div class="timeline-meta">
                            <span>社区活动</span>
                            <span class="experience-gained">+1000 经验值</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="d-flex justify-content-center mt-4">
                <button class="btn btn-outline">
                    <i class="fas fa-history"></i> 查看更多历史记录
                </button>
            </div>
        </div>
        
        <!-- 经验任务内容 -->
        <div class="tab-content" id="tasks-content">
            <p class="text-muted mb-4">完成任务获取经验值，快速提升等级，解锁更多特权</p>
            
            <div class="task-grid">
                <div class="task-card task-daily">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-sun"></i>
                        </div>
                        <h3 class="task-title">每日签到</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">每日登录并完成签到，连续签到可获得额外经验奖励</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 20 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 100%;"></div>
                        </div>
                        <div class="task-progress-text">已连续签到: 15天</div>
                        <div class="task-actions">
                            <button class="task-btn btn-success">
                                <i class="fas fa-check"></i> 已完成
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="task-card task-daily">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h3 class="task-title">参与讨论</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">在社区中发表5条有意义的评论，与其他用户互动交流</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 50 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 60%;"></div>
                        </div>
                        <div class="task-progress-text">3/5 条评论</div>
                        <div class="task-actions">
                            <button class="task-btn btn-primary">
                                <i class="fas fa-comment"></i> 继续完成
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="task-card task-weekly">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-calendar-week"></i>
                        </div>
                        <h3 class="task-title">每周创作</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">每周发布2篇原创内容，分享你的想法和故事</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 200 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 50%;"></div>
                        </div>
                        <div class="task-progress-text">1/2 篇内容</div>
                        <div class="task-actions">
                            <button class="task-btn btn-primary">
                                <i class="fas fa-pen"></i> 去发布
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="task-card task-weekly">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-share-alt"></i>
                        </div>
                        <h3 class="task-title">分享优质内容</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">将社区内的优质内容分享到其他社交平台，邀请更多人参与讨论</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 150 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 0%;"></div>
                        </div>
                        <div class="task-progress-text">0/3 次分享</div>
                        <div class="task-actions">
                            <button class="task-btn btn-primary">
                                <i class="fas fa-share"></i> 去分享
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="task-card task-achievement">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <h3 class="task-title">内容达人</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">发布的内容累计获得1000个点赞，成为社区受欢迎的创作者</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 800 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 困难
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 72%;"></div>
                        </div>
                        <div class="task-progress-text">720/1000 个点赞</div>
                        <div class="task-actions">
                            <button class="task-btn btn-outline">
                                <i class="fas fa-chart-line"></i> 进行中
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="task-card task-achievement">
                    <div class="task-header">
                        <div class="task-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h3 class="task-title">社交达人</h3>
                    </div>
                    <div class="task-body">
                        <p class="task-description">累计关注100位社区用户，拓展你的社交圈和兴趣范围</p>
                        <div class="task-meta">
                            <div class="task-experience">
                                <i class="fas fa-star"></i> 500 经验值
                            </div>
                            <div class="task-difficulty">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                        <div class="task-progress">
                            <div class="task-progress-fill" style="width: 65%;"></div>
                        </div>
                        <div class="task-progress-text">65/100 位用户</div>
                        <div class="task-actions">
                            <button class="task-btn btn-primary">
                                <i class="fas fa-user-plus"></i> 去关注
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 成长排行内容 -->
        <div class="tab-content" id="ranking-content">
            <p class="text-muted mb-4">查看社区中的成长排行榜，了解你的位置和进步空间</p>
            
            <div class="ranking-list">
                <div class="ranking-header">
                    <div class="ranking-column">排名</div>
                    <div class="ranking-column">用户</div>
                    <div class="ranking-column">等级</div>
                    <div class="ranking-column">总经验值</div>
                </div>
                
                <div class="ranking-item rank-1">
                    <div class="rank-position">1</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">清风徐来</div>
                            <div class="rank-level">Lv.6 守护者</div>
                        </div>
                    </div>
                    <div class="rank-score">42,850</div>
                </div>
                
                <div class="ranking-item rank-2">
                    <div class="rank-position">2</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">星辰大海</div>
                            <div class="rank-level">Lv.6 守护者</div>
                        </div>
                    </div>
                    <div class="rank-score">38,620</div>
                </div>
                
                <div class="ranking-item rank-3">
                    <div class="rank-position">3</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">梦想家</div>
                            <div class="rank-level">Lv.5 星光者</div>
                        </div>
                    </div>
                    <div class="rank-score">29,750</div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-position">4</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">旅行者</div>
                            <div class="rank-level">Lv.5 星光者</div>
                        </div>
                    </div>
                    <div class="rank-score">25,380</div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-position">5</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user5/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">知识海洋</div>
                            <div class="rank-level">Lv.5 星光者</div>
                        </div>
                    </div>
                    <div class="rank-score">22,150</div>
                </div>
                
                <div class="ranking-item self">
                    <div class="rank-position">38</div>
                    <div class="rank-user">
                        <img src="https://picsum.photos/seed/user123/100/100" alt="用户头像" class="rank-avatar">
                        <div class="rank-info">
                            <div class="rank-name">星辰大海</div>
                            <div class="rank-level">Lv.4 攀登者</div>
                        </div>
                    </div>
                    <div class="rank-score">3,420</div>
                </div>
            </div>
            
            <div class="d-flex justify-content-center mt-4">
                <div class="btn-group" role="group">
                    <button class="btn btn-outline">周榜</button>
                    <button class="btn btn-primary">月榜</button>
                    <button class="btn btn-outline">总榜</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 标签页切换功能
            const tabItems = document.querySelectorAll('.tab-item');
            
            tabItems.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active类
                    tabItems.forEach(t => t.classList.remove('active'));
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                    
                    // 隐藏所有内容容器
                    const tabContents = document.querySelectorAll('.tab-content');
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 显示对应的内容容器
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(`${tabId}-content`).classList.add('active');
                });
            });
            
            // 任务按钮交互
            const taskButtons = document.querySelectorAll('.task-btn');
            
            taskButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 如果是"去完成"或"继续完成"按钮
                    if (this.textContent.includes('去') || this.textContent.includes('继续')) {
                        const taskCard = this.closest('.task-card');
                        const taskTitle = taskCard.querySelector('.task-title').textContent;
                        const progressFill = taskCard.querySelector('.task-progress-fill');
                        const progressText = taskCard.querySelector('.task-progress-text');
                        
                        // 模拟任务完成进度更新
                        const currentProgress = parseInt(progressFill.style.width);
                        let newProgress = currentProgress + 20;
                        if (newProgress > 100) newProgress = 100;
                        progressFill.style.width = `${newProgress}%`;
                        
                        // 更新进度文本
                        if (progressText.textContent.includes('/')) {
                            const parts = progressText.textContent.split('/');
                            const current = parseInt(parts[0]);
                            const total = parseInt(parts[1]);
                            const newCurrent = Math.min(current + 1, total);
                            progressText.textContent = `${newCurrent}/${total} ${parts.slice(2).join('/')}`;
                            
                            // 如果任务完成
                            if (newCurrent >= total) {
                                this.innerHTML = '<i class="fas fa-check"></i> 领取奖励';
                                this.classList.remove('btn-primary');
                                this.classList.add('btn-success');
                            }
                        }
                        
                        // 显示提示
                        alert(`正在完成任务：${taskTitle}`);
                    } 
                    // 如果是"领取奖励"按钮
                    else if (this.textContent.includes('领取奖励')) {
                        const taskCard = this.closest('.task-card');
                        const taskTitle = taskCard.querySelector('.task-title').textContent;
                        const experience = taskCard.querySelector('.task-experience').textContent;
                        
                        alert(`恭喜！你已完成任务"${taskTitle}"，获得奖励：${experience}`);
                        
                        // 更新按钮状态为已完成
                        this.innerHTML = '<i class="fas fa-check"></i> 已完成';
                        
                        // 更新用户总经验
                        updateUserExperience(parseInt(experience.match(/\d+/)[0]));
                    }
                });
            });
            
            // 更新用户经验值
            function updateUserExperience(amount) {
                const progressFill = document.querySelector('.progress-fill');
                const progressTexts = document.querySelectorAll('.progress-text span');
                
                // 解析当前经验值
                const currentText = progressTexts[0].textContent;
                const currentExp = parseInt(currentText.split('/')[0]);
                const maxExp = parseInt(currentText.split('/')[1]);
                
                // 计算新经验值
                let newExp = currentExp + amount;
                let newPercent = (newExp / maxExp) * 100;
                
                // 处理等级提升情况
                if (newExp >= maxExp) {
                    newExp = newExp - maxExp;
                    newPercent = 0;
                    
                    // 这里简化处理，实际应用中需要根据等级体系计算新的maxExp
                    const newMaxExp = maxExp + 5000;
                    
                    // 更新等级文本
                    const userLevel = document.querySelector('.user-level');
                    const currentLevel = parseInt(userLevel.textContent.match(/\d+/)[0]);
                    userLevel.textContent = `Lv.${currentLevel + 1} 探索者`;
                    
                    // 显示等级提升提示
                    alert(`恭喜！你已升级到 Lv.${currentLevel + 1}，解锁更多特权！`);
                    
                    // 更新进度文本中的最大值
                    progressTexts[0].textContent = `当前经验: ${newExp}/${newMaxExp}`;
                    progressTexts[1].textContent = `距离下一级: ${newMaxExp - newExp}`;
                } else {
                    // 更新进度文本
                    progressTexts[0].textContent = `当前经验: ${newExp}/${maxExp}`;
                    progressTexts[1].textContent = `距离下一级: ${maxExp - newExp}`;
                }
                
                // 更新进度条动画
                progressFill.style.width = `${newPercent}%`;
            }
            
            // 排行榜切换
            const rankButtons = document.querySelectorAll('.btn-group .btn');
            rankButtons.forEach(button => {
                button.addEventListener('click', function() {
                    rankButtons.forEach(btn => {
                        btn.classList.remove('btn-primary');
                        btn.classList.add('btn-outline');
                    });
                    this.classList.remove('btn-outline');
                    this.classList.add('btn-primary');
                    
                    alert(`已切换到${this.textContent}排行榜`);
                });
            });
        });
    </script>
</body>
</html>
    
